/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import "../../../../../../styles/variables.scss";

$disabled-switch-color: $red-02;
$divider-color: $grey-05;
$popover-hover-color: $blue-03;
$grey-font-color: $grey-03;

.profile-detail-view {
  .detail-view-content {
    .detail-view-basic-info {
      .profile-detail-top-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .profile-name-wrapper {
          // 170px for right side enable switch + actions dropdown
          width: calc(100% - 170px);
        }
        .profile-name {
          display: inline-block;
          // 100px for Profile ID label
          max-width: calc(100% - 100px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          line-height: 1.4;
        }

        .profile-actions-wrapper {
          display: flex;
          align-items: center;
        }
        .toggle-switch-container {
          .toggle-switch.off {
            background-color: $disabled-switch-color;
          }
        }

        .divider:after {
          content: "";
          display: block;
          height: 1px;
          border-bottom: 1px solid $divider-color;
          width: 33px;
          transform: rotate(90deg);
        }

        .profile-actions-popover {
          text-align: center;

          &:hover {
            color: $popover-hover-color;
          }
        }
      }

      .profile-description {
        padding-top: 10px;
        color: $grey-font-color;
      }

      .profile-info-grid {
        margin-top: 10px;

        .grid.grid-container {
          .grid-row {
            padding: 0;
            border-bottom: 0;

            &:hover {
              background-color: white;
            }

            & > * {
              padding: 0;
            }
          }

          .grid-header {
            .grid-row {
              strong {
                color: $grey-font-color;
                font-weight: 600;
              }
            }
          }

          .grid-body {
            .grid-row {
              font-size: 15px;

              .icon-cloud {
                font-size: 1.5rem;
                margin-right: 5px;
                color: $grey-font-color;
              }
            }
          }
        }
      }
    }
  }
}
